<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<script src="../js/common/jquery.js"></script>
<script src="../js/common/drag.js"></script>
<script src="../js/common/angular.min.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/service.js"></script>
</head>
<body ng-app="myApp">

<div class="dqwz">
    <span>当前位置：</span>
    <span>AngularJS 服务(Service)</span>
</div>

<section>
    <div ng-controller="locationCtrl">
        <h3>【返回当前页面的url($location服务)】</h3>
        <span>url:{{myUrl}}</span>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<span>url:{{myUrl}}</span>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('locationCtrl',function($scope,$location){
    $scope.myUrl = $location.absUrl();
 })
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div ng-controller="httpCtrl">
        <h3>【向服务器获取信息($http服务)】</h3>
        <span>返回：{{myResponse}}</span>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<span>返回：{{myResponse}}</span>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('httpCtrl',function($scope,$http){
    $http.get('../php/welcome.php').then(function(response){
        $scope.myResponse = response.data;
    })
 })
            </xmp>
            <span>【php源码】</span>
            <xmp>
欢迎访问我的网站！
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div ng-controller="timeOutCtrl">
        <h3>【延迟执行($timeout服务)】</h3>
        <span>显示：{{showInfo}}</span>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<span>显示：{{showInfo}}</span>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('timeOutCtrl',function($scope,$timeout){
    $scope.showInfo = "等待2s显示什么？";
    $timeout(function(){
        $scope.showInfo = "延迟执行了！"
    },2000)
 })
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div ng-controller="intervalCtrl">
        <h3>【循环执行($interval服务)】</h3>
        <span>时间：{{showTime}}</span>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<span>时间：{{showTime}}</span>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('intervalCtrl',function($scope,$interval){
    $scope.showTime = new Date().toLocaleTimeString();
    $interval(function(){
        $scope.showTime = new Date().toLocaleTimeString();
    },1000)
 })
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div ng-controller="serviceCtrl">
        <h3>【自定义服务】</h3>
        <span>{{animal}}：{{do}}</span>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<span>{{animal}}：{{do}}</span>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.service('foot',function(){
    this.footing = function(x){
       return x;
    }
 })
 app.controller('serviceCtrl',function($scope,foot){
    $scope.do = foot.footing('吃小鱼');
    $scope.animal = '小花猫正在';
 })
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>
</section>

<div class="mask_layer">
</div>

</body>
</html>